import React from "react";
import PropTypes from "prop-types";
import Style from './plan-item.module.css'

export default class PlanItem extends React.Component{

  static propTypes = {
    plan: PropTypes.string.isRequired,
    date: PropTypes.string.isRequired,
    order: PropTypes.number,
    draggable: PropTypes.bool.isRequired
  }

  static defaultProps = {
    draggable: false 
  }

  state = {
  }

  // handleOnMouseDown = () => {
  //   this.setState({grabbing: true})
  // }

  // handleOnMouseUp = () => {
  //   this.setState({grabbing: false})
  // }

  handleOnDrag

  render() {
    let child_pre = this.getChildByName('preffix')
    return (
      <li 
        className={Style.planItem}
        draggable={this.props.draggable}
        // onMouseDown={this.handleOnMouseDown}
        // onMouseUp={this.handleOnMouseUp}
      >
        {
          child_pre ? child_pre : (<span className={Style.preffix}>{this.props.order}</span>)
        }
        <span className={Style.content}>{this.props.plan}</span>
        <span className={Style.date}>{this.props.date}</span>
      </li>
    )
  }

  getChildByName = (name) => {
    const {children} = this.props
    if(Array.isArray(children)) {
      return this.props.children.find(child => {
        return child.props.name === name
      })
    } else if(children && children.props.name === name) {
      return this.props.children
    }
    return undefined
  }
}